<template>
    <div class="detailOfDailyNew" v-loading="pageLoading">
        <cardComponent pageTitle="按日贷明细查询-->new">
            <template slot="cardBody">
                <!-- 按日贷明细查询-new -->
                <div class="detailOfDailyNewMain">
                    <el-form
                        :model="formData"
                        label-width="100px"
                        size="small"
                        ref="editForm"
                        :rules="rules"
                    >
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="账户类别:" label-position="left" prop="mainCardNo">
                                    <el-input disabled v-model="accountType" style="width: 220px;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="主卡卡号:" label-position="left" prop="mainCardNo">
                                    <el-input
                                        v-model="formData.mainCardNo"
                                        style="width: 220px;"
                                        disabled
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="起始日期:" label-position="left" prop="startDate">
                                    <el-date-picker
                                        v-model="formData.startDate"
                                        type="date"
                                        placeholder="请选择起始日期"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                        :picker-options="startOptions"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="结束日期:" label-position="left" prop="endDate">
                                    <el-date-picker
                                        v-model="formData.endDate"
                                        type="date"
                                        placeholder="请选择结束日期"
                                        format="yyyy-MM-dd"
                                        value-format="yyyyMMdd"
                                        :picker-options="endtOptions"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-button
                                    type="primary"
                                    size="small"
                                    icon="el-icon-search"
                                    @click="handleSearch"
                                >查询</el-button>
                                <el-button
                                    type="primary"
                                    icon="el-icon-refresh-right"
                                    size="small"
                                    @click="reset"
                                >重置</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="dialogVisible">
                    <el-table
                        :data="tableData"
                        width="100%"
                        border
                        stripe
                        class="heard-bg business_table"
                    >
                        <el-table-column label="卡号" prop="CARDNBR"></el-table-column>
                        <el-table-column label="分期付款申请编号" prop="APPREF"></el-table-column>
                        <el-table-column label="分期付款交易日期" prop="BEGYM">
                            <template slot-scope="scoped">
                                <span>{{ scoped.row.BEGYM | formatDate }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品编号" prop="PRODID"></el-table-column>
                        <el-table-column label="商品名称" prop="DESC1"></el-table-column>
                        <el-table-column label="分期金额" prop="MPAMT">
                            <template slot-scope="scope">
                                <span>{{scope.row.MPAMT | getMoney}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="手续费分摊次数" prop="MPMTHS"></el-table-column>
                        <el-table-column label="状态" prop="STATUS">
                            <template slot-scope="scope">
                                <span>{{scope.row.STATUS | getStatusTxt}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="分期天数" prop="LOANDAY"></el-table-column>

                        <el-table-column label="分期到期日" prop="LOANDATE">
                            <template slot-scope="scope">
                                <span>{{scope.row.LOANDATE | formatDate}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="分期年利率" prop="LOANRATE">
                            <template slot-scope="scope">
                                <span>{{ scope.row.LOANRATE + '%' }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="分期日费率" prop="LOANRATE">
                            <template slot-scope="scope">
                                <span>{{ scope.row.LOANRATE | computedRATES}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="剩余本金" prop="REMPPL"></el-table-column>
                        <el-table-column label="当前已产息费金额" prop="REMFEE"></el-table-column>
                        <!-- <el-table-column label="当前至贷款到期将产生息费" prop="REMFEE2"></el-table-column> -->
                        <el-table-column label="当前至分期到期将产息费" prop="REMFEE2"></el-table-column>
                    </el-table>
                </div>
                <div class="footer">
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleChangePage('pre')"
                        :disabled="currentApprefIndex <= 0"
                    >上一页</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleChangePage('next')"
                        :disabled="!nextButtonFlag"
                    >下一页</el-button>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import moment from 'moment';
import { mapState } from 'vuex';
import { LOANSTATUS_DAILYBASIS } from '@/utils/Contants';
import { trimString, getAccountTypeName } from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    name: 'detailOfDailyNew',
    components: {
        cardComponent,
    },
    data() {
        return {
            pageLoading: false, // 页面loading
            nextButtonFlag: false, // 下翻页按钮 显示控制阀
            pagingDataList: [], // 分期付款申请编号(只存每页最后一条记录)
            currentApprefIndex: 0, // 当前页最后一条记录的申请编号的索引
            // 表单数据
            formData: {
                startDate: '',
                endDate: '',
                mainCardNo: '',
            },

            cardNumber: '',
            // 单选数据
            radioData: 2,
            tableData: [],
            rules: { // 表单校验规则
                startDate: [
                    { required: true, message: '请选择起始日期', trigger: 'blur' },
                ],
                endDate: [
                    { required: true, message: '请选择结束日期', trigger: 'blur' },
                ],
            },
            startOptions: { // 开始日期选择 限制
                disabledDate: (time) => {
                    if (this.formData.endDate) {
                        return time.getTime() > new Date(moment(this.formData.endDate).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
            endtOptions: { // 结束日期选择限制
                disabledDate: (time) => {
                    if (this.formData.startDate) {
                        return time.getTime() < new Date(moment(this.formData.startDate).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
            pagingDataList: [], // 翻页上送字段列表
            accountType: '',
        };
    },
    filters: {
        // 查询状态
        getStatusTxt(txt) {
            let text = '';
            txt = txt.trim();
            LOANSTATUS_DAILYBASIS.forEach((item) => {
                if (item.value === trimString(txt)) {
                    text = item.label;
                }
            });
            return text;
        },
        // 日期格式转换
        formatDate(val) {
            const text = `${val}`;
            return moment(text).format('YYYY-MM-DD');
        },
        // 金额保留两位小数
        getMoney(val) {
            //  return Number(val.toString().match(/^\d+(?:\.\d{0.2})?/))
            return val.toFixed(2);
        },
        // 计算日费率
        computedRATES(val) {
            val *= 100;
            const Rates = parseFloat(val / 36000).toFixed(3);
            return `${Rates}%`;
        },
    },
    async mounted() {
        this.formData.mainCardNo = this.cardInfo_3004.CARDNO;
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this);
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        cardList_3601: state => state.common.cardList_3601,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
    }),
    methods: {
        // 点击查询
        handleSearch() {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    this.pagingDataList = [];
                    this.currentApprefIndex = 0;
                    this.dialogTable();
                } else {

                }
            });
        },

        // 按日贷明细查询 -- 3121交易
        dialogTable() {
            this.pageLoading = true;
            // 设置请求参数
            let NEXTDAY = this.formData.startDate;
            let NEXTMPNO = 0;
            if (this.pagingDataList.length) { // 判断翻页上传字段取值
                NEXTDAY = this.pagingDataList[this.currentApprefIndex].NEXTDAY;
                NEXTMPNO = this.pagingDataList[this.currentApprefIndex].NEXTMPNO;
            }
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO.trim() || '', // 卡号
                OPERCODE: 0, // 操作代码  0全部返回  1未还款的贷款交易    2已还款的贷款交易
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                BEGDAY: this.formData.startDate, // 起始日期
                ENDDAY: this.formData.endDate, // 终止日期
                RTNIND: this.pagingDataList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
                NEXTDAY, // 首次查询时送查询起始日期， 下翻页查询时上送上次查询结果的最后一条记录返回的分期付款交易日期
                NEXTMPNO, // 首次查询时送起始序号，默认为0 下翻页查询时上送上次查询结果的最后一条记录返回的交易序号
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3121';
            defaultParams.body.appBody = appBody;
            // 3121交易
            this.$post.common.transPort(defaultParams).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 111111);
                    if (result.sysHead.rspCd === '000000') {
                        this.tableData = result.body.appBody.dataList || [];
                        const currentPagingData = {
                            NEXTDAY: result.body.appBody.dataList[result.body.appBody.dataList.length - 1].BEGYM,
                            NEXTMPNO: result.body.appBody.dataList[result.body.appBody.dataList.length - 1].MPNO,
                        };
                        this.nextButtonFlag = !(result.body.appBody.dataList.length < 5);
                        let flag = false;
                        let currentIndex;
                        this.pagingDataList.forEach((item, index) => { // 判断此次查询数据最后一条记翻页分期付款序号是否在已有列表中
                            if (item.NEXTMPNO === currentPagingData.NEXTMPNO) {
                                flag = true;
                                currentIndex = index;
                            }
                        });
                        if (flag) { // 存在
                            this.currentApprefIndex = currentIndex;
                        } else {
                            this.pagingDataList.push(currentPagingData);
                            this.currentApprefIndex = this.pagingDataList.length - 1;
                        }
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败!', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },
        // 重置
        reset() {
            this.formData.startDate = '';
            this.formData.endDate = '';
        },
        // 上下页切换
        handleChangePage(type) {
            if (type === 'pre') { // 切换到上一页
                if (this.currentApprefIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.currentApprefIndex = this.currentApprefIndex - 2;
                }
                this.dialogTable();
            } else { // 切换到下一页
                this.dialogTable();
            }
        },
    },
};
</script>

<style lang='scss' scoped>
.detailOfDailyNew {
    width: 98%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;
    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: left;
        span {
            font-size: 14px;
        }

        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
    }
    //主体内容
    .detailOfDailyNewMain {
        width: 100%;
        .el-row {
            margin: 20px 0;
            .el-col {
                text-align: left;
                color: #333;
                display: flex;
                line-height: 34px;
                font-size: 14px;
                .mainRight {
                    margin-left: 10px;
                }
            }
        }
    }
    .footer {
        text-align: right;
        margin-top: 30px;
    }
}
.dialogVisible {
    margin-top: 20px;
    .el-col {
        text-align: left;
    }
}
</style>
